import React, {Component} from 'react';
import {Card, WingBlank, WhiteSpace} from 'antd-mobile'
import PropTypes from 'prop-types'
import {withRouter} from 'react-router-dom'
import QueueAnim from 'rc-queue-anim'


let Header = Card.Header
let Body = Card.Body

class UsersList extends Component {

    static propsTypes  = {
        userList: PropTypes.array.isRequired
    }

    render() {
        return (
            <WingBlank style={{marginBottom:50, marginTop:50}}>
                <QueueAnim type='scale'>
                {
                    this.props.userList.map(user => {
                       return  <div key={user._id}>
                                    <WhiteSpace/>
                                    <Card onClick={ () => this.props.history.push(`/chat/${user._id}`) }>
                                        <Header
                                            thumb= {user.header ? require(`../../assets/images/${user.header}.png`) :null}
                                            extra={user.username}
                                        />
                                        <Body>
                                            <div>职位 : {user.post}</div>
                                            {user.company ? <div>公司 : {user.company}</div> : null}
                                            {user.salary ? <div>预定 : {user.salary}</div> : null}
                                            <div>描述 : {user.post}</div>
                                        </Body>
                                    </Card>
                                </div>
                    })
                }
                </QueueAnim>
            </WingBlank>
        );
    }
}

export default withRouter(UsersList) ;